
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Git仓库可以提供哪些托管功能？ - 学习卡片</title>
      <style>
        body { font-family: sans-serif; background-color: #f0f8ff; color: #333; display: flex; flex-direction: column; align-items: center; padding: 50px 20px; }
        .header h1 { font-size: 32px; }
        .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; max-width: 1200px; }
        .card-container { perspective: 1200px; cursor: pointer; height: 250px; }
        .card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.7s; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
        .card-container.flipped .card { transform: rotateY(180deg); }
        .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; box-sizing: border-box; border-radius: 16px; background-color: #fff; padding: 24px; }
        .card-back { background-color: #f0fff4; transform: rotateY(180deg); justify-content: space-between; }
        .card-category { font-size: 14px; color: #0052d9; margin-bottom: 8px; font-weight: 500; }
        .card-question { font-size: 20px; font-weight: 500; flex-grow: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
        .card-answer-wrapper { flex-grow: 1; overflow-y: auto; }
        .card-answer { font-size: 15px; line-height: 1.7; }
        .card-footer { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 16px; margin-top: 16px; }
        .card-source { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 12px; margin-top: 12px; }
      </style>
    </head>
    <body>
      <div class="header">
        <h1>Git仓库可以提供哪些托管功能？ - 学习卡片</h1>
      </div>
      <div class="grid-container">
        
    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">核心功能</div>
          <div class="card-question">Git最核心的功能“版本控制”体现在哪些方面？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">核心功能</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">它允许开发者跟踪代码的变化，记录每次修改的详细信息。每次提交（commit）都会保存代码的快照和元数据（如作者、日期、提交信息），从而可以随时回滚到先前的版本、比较代码差异以及恢复丢失的代码。</div>
          </div>
          <div class="card-source">来源: 1. 版本控制</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">Git的分支管理功能是如何支持并行开发的？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">每个分支代表一个独立的开发环境，允许开发人员在不干扰主线代码的情况下开发新功能或修复问题。这种方式使得并行开发成为可能，并且通过灵活的创建、删除和合并分支操作，让代码的集成和发布变得高效。</div>
          </div>
          <div class="card-source">来源: 2. 分支管理</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">协作</div>
          <div class="card-question">远程仓库在Git团队协作中扮演什么角色？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">协作</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">远程仓库是代码托管服务的核心，它允许开发团队在不同地理位置之间共享代码。团队成员可以通过推送（push）和拉取（pull）操作同步代码，从而实现协作开发并同步工作进度。</div>
          </div>
          <div class="card-source">来源: 3. 远程仓库支持</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">安全</div>
          <div class="card-question">为什么权限管理功能对于大型团队和开源项目尤为重要？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">安全</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">因为它能够确保代码安全。通过细粒度的权限管理，可以控制谁可以访问、修改或提交到特定的仓库或分支，从而有效防止未经授权的访问或修改。</div>
          </div>
          <div class="card-source">来源: 4. 权限管理</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">流程</div>
          <div class="card-question">在Git托管服务中，实现代码审查（Code Review）的主要机制是什么？其目的是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">流程</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">主要机制是拉取请求（Pull Request）。开发者通过它提交代码更改的请求，团队成员可以对其进行审查、评论和讨论。其目的是发现和修复代码中的缺陷，确保代码符合团队的质量标准。</div>
          </div>
          <div class="card-source">来源: 5. 代码审查</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">Git托管服务与CI/CD工具集成后，能为开发流程带来哪些自动化能力？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">集成CI/CD后，可以在代码提交后实现自动化构建、自动化测试（单元测试和集成测试）以及自动化部署。这确保了每次提交都不会引入新问题，并简化了部署过程。</div>
          </div>
          <div class="card-source">来源: 6. 持续集成和持续部署（CI/CD）</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">工具</div>
          <div class="card-question">除了代码管理，Git托管服务还提供哪些功能来帮助团队进行项目管理？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">工具</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">许多Git托管服务提供内置的问题追踪和项目管理功能，例如：用于创建和跟踪任务的“问题追踪”，用于可视化管理工作进度的“项目看板”，以及用于设定和监控进度的“里程碑和计划”。</div>
          </div>
          <div class="card-source">来源: 7. 问题追踪和项目管理</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">概念</div>
          <div class="card-question">Git中的“标签”（Tag）通常用于什么目的？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">概念</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">标签是对特定提交的标记，通常用于标识重要的版本或发布。它对于版本控制和发布管理非常有用，方便管理和追溯版本历史。</div>
          </div>
          <div class="card-source">来源: 8. 标签管理</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">模式</div>
          <div class="card-question">文档中提及了哪些常见的分支策略？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">模式</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">文档中作为示例提及的分支策略包括Git Flow和GitHub Flow。</div>
          </div>
          <div class="card-source">来源: 2. 分支管理</div>
        </div>
      </div>
    </div>

      </div>
    </body>
    </html>
